<template>
  <div class="menu-bar">
    <el-menu :default-active="currentMenu" router>
      <template v-for="menu in menus" :key="menu.path">
        <el-menu-item :index="menu.meta?.index" :route="menu.path">
          <el-icon><component :is="menu.meta?.icon" /></el-icon>
          <span>{{ menu.meta?.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();

const router = useRouter();

// 计算当前菜单
const currentMenu = computed(() => route.meta.index);

// 计算菜单列表
const menus = computed(() => {
  return router.getRoutes().find((item) => item.name === "main")?.children;
});
</script>

<style scoped lang="scss">
.el-menu {
  border-right: 0;
}
</style>
